<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<link rel="shortcut icon" href="images/store.png" /><!--图片logo  -->
<title>商品详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/base.css" rel="stylesheet">
<link href="css/detail.css" rel="stylesheet">
<link href="css/swiper.min.css" rel="stylesheet">
</head>
<body>
    <div style="padding: 0px 0px 55px; display: block;" class="by_w" id="by_w">
        <!--抬头-->
        <div class="m_pagetop hidiv" align="center">
            <span class="m_goback" onclick="document.location.href = 'javascript:history.go(-1)';"></span>
            <span class="m_title escp" id="modelName">商品详情</span>
        </div>
        <div style="min-height: 490px;" class="m_wap hidiv" id="min_hdiv">
            <!--滚动图  -->
			<div class="swiper-container">
			<!-- Additional required wrapper -->
			<div class="swiper-wrapper">
			<!-- Slides -->
			<c:forEach items="${product.pictureList}" var="picture">
			<div class="swiper-slide"><img style="width:100%" src="${picture}"></div>
			</c:forEach>
			</div>
			<!-- If we need pagination -->
			<div class="swiper-pagination"></div>
			</div>
<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 1000,
});
</script>
            <div class="p_ddl_p">
                <!--7天无忧退换部分-->
                <div class="m_p_jg">
                    <table>
                        <tbody style="font-size:14px;">
                            <tr>
                             <td style="text-align:left;height:35px">
                                  <span style="font-size:16px;color:#da0203;">${product.spmch}
                                  </span>
                             </td>
                             <td style="text-align:left;font-size:14px;">
		                          <span >
                                       ${product.changjia}
                                  </span>  
                             </td> 
                            </tr>
                            <tr>
                             <td style="text-align:left">
                             		<input class="tejia" type="hidden" value="${product.isSpecialarea}">
                                    <span style="font-size:14px;color:#da0203" class="price" id="btjia">抱团价：￥${product.price}</span><br />
                                </td>
                                 <td style="text-align:left">
                                 	<input class="yuanjia" type="hidden" value="${product.priceYj}">
                                    <span style="color:#da0203" class="price" id="lsjia">零售价：￥${product.lingshoujia}</span><br />
                                </td>
                            </tr>
                            <c:if test="${product.priceChl!=null&&product.priceChl!=0}">
                            	<tr>
                             	<td style="text-align:left">
                             		<input class="chl" type="hidden" value="${product.priceChl}">
                                    <span style="color:#da0203" class="price" id="btjia">拆零价：￥${product.priceChl}</span><br />
                                </td>
                                </tr>
                            </c:if>
                             <tr>
                             <td style="text-align:left">
                                    <span>库存数：
                                    <c:choose>
                                    	<c:when test="${product.productBal[0].kxshl>1000}">
                                    		>1000
                                    	</c:when>
                                    	<c:otherwise>
                                    		${product.productBal[0].kxshl}
                                    	</c:otherwise>
                                    </c:choose>
                                    </span><br />
                                </td>
                                <td style="text-align:left">
                                    <span>批号：≥${product.productBal[0].pihao}
                                    </span><br/>
                                </td>
                            </tr>
                            <tr>
                             	<td style="text-align:left">
                                    <span>中包装量：${product.zhongbz}盒
                                    </span><br />
                                </td>
                                <td style="text-align:left">
                                    <span>件装量：${product.jlgg}盒
                                    </span><br />
                                </td>
                            </tr>
                            <tr>
                             	<td style="text-align:left">
                                    <span>保质期：${product.productBal[0].sxrq}
                                    </span><br />
                                </td>
                                <td style="text-align:left">
                                    <span>规格：${product.shpgg}
                                    </span><br />
                                </td>
                            </tr>
                            <c:if test="${product.zengsong!=null}">
	                            <tr>
	                            <td colspan="2" align="left" style="color:#da0203">
	                            	<span>好消息：</span>
	                            	<span>${product.zengsong.tip}</span>
	                            </td>
	                            </tr>
	                            <tr>
	                            <td colspan="2" align="left">
	                            	<span>时间：</span>
	                            	<span>${product.zengsong.fstarttime}—${product.zengsong.fendtime}</span>
	                            </td>
	                            </tr>
                            </c:if>
                            <!-- <tr>
                                <td colspan="2" align="left">
                                    <div class="sjmd_detail">
                                        <span class="p_pfw" title="实物破损、不符、质量问题，退换货商家承担往返运费。">
                                            <span class="icon-chengnuo"></span>7天无忧退换
                                        </span><span class="p_pfw" title="争议可申诉，申诉成功，立即退款。">
                                            <span class="icon-chengnuo"></span>先行赔付
                                        </span><span class="p_pfw" title="未按承诺时间发货，系统自动赔付（赔款金额为订单商品金额的30%，上限500元）。">
                                            <span class="icon-chengnuo"></span>超时赔偿
                                        </span><span class="p_pfw" title="运费由商家承担"><span class="icon-chengnuo"></span>顺丰包邮</span>
                                    </div>
                                </td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>

                <!--选择规格部分-->
                <!-- <a class="m_dl_xqpjsj" id="p_cm">选择规格<span class="ckcm"></span></a> -->
                <!-- <a class="m_dl_xqpjsj" id="p_comment" href="javascript:;">
                    商品评价(<span id="totalComm">0</span>)<span class="pjscs">5.0 分</span>
                </a> -->
                <div class="m_p_sj bbox">
                    <table class="b_b_dc bg_rt" id="m_sjxx" border="0" cellpadding="0" cellspacing="2" width="100%">
                        <tbody>
                            <tr>
                                <td align="left" width="60px">
                                    <a href="javascript:;"><img src="images/store.png" class="sjpic" id="sjpic" height="50px" width="50px"></a>
                                </td>
                                <td align="left">
                                    <span class="escp p_sjname" id="supplierName">湖南恒昌医药有限公司</span>
                                    <span id="supplierPhone">400-662-4000</span>
                                </td>
                                <td class="callicon">
                                    <span style="display: inline-block;" class="phone_icon2 icon-phone"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- <div class="p_sjpf" align="left">
                        <div class="p_pfn" align="center"><span class="col_f60" id="serviceGrade">4.9</span><br>物流服务</div>
                        <div class="p_pfn" align="center"><span class="col_f60" id="qualityGrade">4.9</span><br>商家服务</div>
                        <div class="p_pfn" align="center"><span class="col_f60" id="productGrade">4.9</span><br>实物相符</div>
                    </div> -->
                </div>
            </div>

            <!--图文详情-->
            <div class="morets none">
            </div>
            <div class="m_p_spxq bbox" id="pdetial" style="font-size:15px">
                <h3>${product.spmch}</h3>
                <p>ID:&nbsp;${product.spid}</p>
                <p>商品名称:&nbsp;${product.spmch}</p>
                <p>厂家:&nbsp;${product.shpchd}</p>
                <p>规格:&nbsp;${product.shpgg}</p>
                <p>保质期:&nbsp;≥${product.productBal[0].sxrq}</p>
                <p>批准文号:&nbsp;${product.pizhwh}</p>
                <p>类别:&nbsp;${product.leibie}</p>
                <p>件装量:&nbsp;${product.jlgg}</p>
                <p>单位:&nbsp;${product.dw}</p>
                <p>剂型:&nbsp;${product.jixing}</p>
                <p>处方分类:&nbsp;${product.chuffl}</p>
                <p>存储条件:&nbsp;${product.cunchtj}</p>
                <p>商品条码:&nbsp;${product.sptm}</p>
                <!--@Html.Raw(@Model.productdesc)-->
                <!--底部加入购物车和立即购买-->
                <div class="sub_btn bbox hidiv" align="center">
                    <div class="cart_cc">
                        <span class="cart_i"></span>
                        <span class="cart_i_p none_im">0</span>
                    </div>
                    <input class="m_dl_buynow" id="goshop" value="立即购买" type="button">
                    <input class="m_dl_addcar m_dl_addcar2" id="addcart" value="加入购物车" type="button">
                </div>
            </div>

            <!--选择尺码弹出窗-->
            <div class="cmmy_bg none" id="cmmy" title="选择规格">
                <div class="fx_dl bbox">
                    <div class="tc_p_d">
                        <%-- <img src="images/product/${product.spid }/0.jpg" class="p_slt f_l"> --%>
                        <img src="http://www.hnhcyy.com/resource/img/${product.spid}/10.jpg" class="p_slt f_l">
                        <div>
                            <div style="color: #da0203;font-size: 18px;">￥
                            <label id="tc_price">
                            <c:choose>
	                            <c:when test="${product.priceChl!=null&&product.priceChl!=0&&product.zhongbz<product.jlgg}">
	                            	${product.priceChl}
	                            </c:when>
	                            <c:otherwise>
	                            	${product.price}
	                            </c:otherwise>
                            </c:choose>
                            </label></div>
                        </div>
                        <div style="clear:both;"></div>
                        <span class="cmclose icon-circle_close" style="margin: -70px -10px 0 0;"></span>
                    </div>
                    <div id="cmss" style="padding: 0 12px 0 12px;">
                            <div class="cm1">${product.spmch}</div>
                            <div class="cm4" style="word-break: break-all;margin-top:7px;margin-bottom:2px;font-size: 12px;color: #999;" align="left">
                            </div>
                            <ul class="cm2" id="sizesList">
                                <li class="m_dl_cm bbox cm_checked" attrid="@attrvalue.AttrValueList[i].attrvalueid">${product.dw}</li>
                                <!-- <li class="m_dl_cm bbox" attrid="@attrvalue.AttrValueList[i].attrvalueid">1</li> -->
                            </ul>
                    </div>
                    <div class="cm3">
                        <table cellpadding="1" cellspacing="0" width="100%">
                            <tbody>
                                <tr>
                                    <td class="f14" align="left">购买数量</td>
                                    <td class="relative" align="left">
                                        <div class="m_ps bbox icon-add" type="button" id="add_num"></div>
                                        <input class="m_pnum bbox" id="nums" maxlength="4" value="${product.zhongbz}" type="text">
                                        <div class="m_pp bbox icon-reduce" type="button" id="des_num"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="cm_b_c">
                        <div class="cart_cc">
                            <span class="cart_i"></span>
                            <span class="cart_i_p none_im">0</span>
                        </div>
                        <input class="m_dl_addcar cmcar" value="确定" id="confirm" type="button">
                    </div>
                </div>
            </div>
     	</div>
     </div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-html5Validate.js"></script>
<script type="text/javascript">
	$(function(){
        var tejia=$(".tejia").val();//特价
        var yuanjia=$(".yuanjia").val();//原价
		if(tejia==1||tejia==2){//判断是否是特价商品
	 		var btjia=$("#btjia").text().substring(0, $("#btjia").text().indexOf("："));	
	 		$("#btjia").text($("#btjia").text().replace(btjia,"特价"));
	 		if(yuanjia!="0.0"){//如果原价不等于0
	 			//var lsjia=$("#lsjia").text().substring(0, $("#lsjia").text().indexOf("："));	
	  			$("#lsjia").text("原价：￥"+yuanjia);
	 		}
		}
		var stock=Number('${product.productBal[0].kxshl}');//库存数量
        var priceZhj=${product.price};//整件价格
        var priceChl=${product.priceChl};//拆零价格
        var jlggnum = ${product.jlgg}//件装量
        var minnum = ${product.zhongbz};//最小订购数量（中包装量）
        var maxnum=1000-1000%minnum;
        $("#p_cm").bind("click",
          function () {
              $("#cmmy").removeClass("none"),
              $("#cmmy")[0].addEventListener("touchmove",//阻止手机滚动
              function (e) {
                  e.preventDefault()
              })
        });

        $("#p_dzb").bind("click", function () {
            $("#cmdzb").removeClass("none");

        })
        $("#cmdzb").bind("click", function () {
            $("#cmdzb").addClass("none");
        })

        $(".cmclose").bind("click",
          function () {
              $(".cmmy_bg").addClass("none"),
              buyNowFlag = !1
          })
		$("#addcart").click(function () {
            $("#cmmy").removeClass("none");
        });
		$("#goshop").click(function () {
			var num = $(".cart_cc .cart_i_p").text();
			if(num==0){
             $("#cmmy").removeClass("none");
			}else{
				window.location.href="Shop/Cart/Index?sjid=${sjid}";
			}
        });
		$(".cart_cc").click(function () {//购物车图标，点击进入购物车页面
            window.location.href = "Shop/Cart/Index?sjid=${sjid}";
        });
		$(document).on('click','#add_num',function(){//+增加数量
            var t = $("#nums");
            t.val(parseInt(t.val()) + minnum);
          	//数量超出限购
            //小于1000的中包装量最大倍数
			if(t.val()>maxnum){
				t.testRemind("不能超出限购数量！").val(maxnum,stock);
			}
          	changePrice(t.val());
            setTotal();
        });
		$("#des_num").bind("click",//-减少数量
                 function() {
                     var t = $("#nums");
                     t.val(parseInt(t.val()) - minnum);
                     changePrice(t.val());
                     setTotal(); 
        });
		function changePrice(num){
			if(priceChl != 0){//拆零价存在
				var priceTag = $("#tc_price");
           		var price = priceChl;//默认拆零价
	 			if(num >= jlggnum){//大于等于件装量时，价格改为整件价格
	 				price = priceZhj;
	           	}
	 			priceTag.html(price.toFixed(2));
			}
		}
		function setTotal() {
            var t = $("#nums");
            var tt = t.val();
            if (tt <= 0) {
                t.val(parseInt(tt) + minnum)
            } 
        }
		$("#nums").change(function() {
            var t = $(this);
            if(isNaN(t.val())){
            	t.val(minnum);
            }else{
             	var tt = Math.max(minnum,t.val());
             	t.val(tt);
				if(tt>maxnum||tt>stock){
					t.testRemind("超出限购数量！");
				}else{
		              if (tt % minnum != 0) {
		                  var tmp = tt - tt % minnum + minnum;
		                  if (tmp < minnum) {
		                      tmp = minnum;
		                  }
		                  t.val(tmp);
		              }
		              changePrice(tt);
				}
            }
        })
        
        $("#sizesList li").click(function () {
             $(this).addClass("cm_checked").siblings().removeClass("cm_checked");
        });
		
		var cartNum=0;
        $("#confirm").click(function () {
        	//批号为空
        	var pihao='${product.productBal[0].pihao}';
            var e = parseInt($("#nums").val());
        	if(pihao==''||e>stock){
        		$(this).testRemind("库存不足！");
        		return false;
        	}
        	//如果没有超过限购数量，执行ajax，将数据写入购物车表
            if (e>=1&&e<=maxnum)
            {
                cartNum =cartNum + e;
                var productid = '${product.spid}';
                var sjid=${sjid}
                $.ajax({
                    url: 'Shop/Cart/AddCart',
                    data: {spid: productid, FQty: e, sjid:sjid },
                    type: 'post',
                    //contentType:"application/json;charset=utf-8",
                    success: function (data) {
                    	$(".cart_cc .cart_i_p").text(cartNum).removeClass("none_im").testRemind("成功加入购物车！");
                        $(".cmmy_bg").addClass("none");
                    }
                }); 
            }
            else {
            	$("#nums").testRemind("不能超出限购数量！").val(maxnum);
            }
        });
        //价格小数点后如果是1位就转换成2位
        $(".price").each(function(){
        	var price=$(this).html().substring($(this).html().indexOf("￥")+1);
   	  		var p=parseFloat(price).toFixed(2);
   	  		$(this).html(($(this).html().replace(price,p)));
        })
        var str=$("#tc_price");
        var price=str.html().substring(str.html().indexOf("￥")+1);
        var p=parseFloat(price).toFixed(2);
        str.html(str.html().replace(price,p));
	})
</script>     
</body>
</html>